<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        var url;  // 提前定义url 执行具体操作时 动态复制
        function formatEdit(val,row) {
            console.log(row)
            return "<a href=\"javascript:openMenuSetDialog("+row.id+")\"><img style='margin-top:4px' src='/static/images/edit.gif'/></a>";
        }


        function saveMenuSet() {
            var roleId=$("#roleId").val();
            var nodes = $("#menuTree").tree("getChecked");
            var menuArrIds=[];
            for(var i=0;i<nodes.length;i++){
                menuArrIds.push(nodes[i].id);
            }
            var menuIds = menuArrIds.join(",");
            $.post("/admin/role/saveMenuSet",{menuIds:menuIds,roleId:roleId},function (result) {
                if (result.success){
                    closeMenuSetDialog();
                    $("#dg").datagrid("reload");
                }else{
                    $.messager.alert("系统提示","提交失败,请联系管理员!")
                }
            },"json");
        }

        function openMenuSetDialog(roleId){
            $("#dlg2").dialog("open").dialog("setTitle","权限菜单设置");
            $("#menuTree").tree({
                lines:true,
                checkbox:true,
                cascadeCheck:false,
                url:'/admin/role/loadCheckMenuInfo?parentId=-1&roleId='+roleId,
                onLoadSuccess:function () {
                    $("#menuTree").tree("expandAll")
                },
                onCheck:function (node,checked) {
                    if (checked){
                        // 选中所有父节点
                        checkParentNode($("#menuTree").tree("getParent",node.target));

                    }

                },
                onClick:function (node) {
                    // 判断当前节点是否为选中,选中则取消选中,否则选中
                    //var tmp =$("#menuTree").tree("check",node.target);

                    if (node.checked){
                        $("#menuTree").tree("uncheck",node.target);
                        // 当取消的时候判断所有同级节点是否都被取消,如果都取消就取消父级节点
                          uncheckedParentNode(node)
                    }else{
                        $("#menuTree").tree("check",node.target);
                    }
                    // 判断是否全部选中,如果没有全部选中就全部选中,如果全部选中的就取消全部选中
                    if (isAllChecked($("#menuTree").tree("getChildren",node.target))){
                        // 选中所有子节点
                        uncheckChildrenNode($("#menuTree").tree("getChildren",node.target));
                    }else{
                        // 选中所有子节点
                        checkChildrenNode($("#menuTree").tree("getChildren",node.target));
                    }


                }
            });


            $("#roleId").val(roleId);
        }


        function uncheckedParentNode(node) {
            var allNodesCencel = true;
            var parentNode = $("#menuTree").tree("getParent",node.target);
            if(!parentNode){
                return;
            }
            var nodes = $("#menuTree").tree("getChildren",parentNode.target);
            if (nodes.length==0){
                return;
            }
            for(var i=0;i<nodes.length;i++){
                var tmp = nodes[i];
                if (tmp.checked){
                    allNodesCencel = false;
                    break;
                }
            }
           // alert(allNodesCencel)
            if (allNodesCencel){
               // uncheckedParentNode(parentNode);
                uncheckParentNode(node);
            //    $("#menuTree").tree("uncheck",parentNode.target);

            }

        }

        function isAllChecked(nodes) {
            var allChecked = true;

            for(var i=0;i<nodes.length;i++){
                var node = nodes[i];
                if (!node.checked){
                    allChecked = false;
                    break;
                }
            }
            return allChecked;


        }

        function uncheckChildrenNode(nodes) {
            //  alert(nodes.length)
            if (nodes.length==0) {
                return;
            }else{
                for(var i = 0;i<nodes.length;i++){
                    var node = nodes[i];
                    uncheckChildrenNode($("#menuTree").tree("getChildren",node.target));
                    $("#menuTree").tree("uncheck",node.target); // 选中菜单
                }

            }

        }

        function checkChildrenNode(nodes) {
          //  alert(nodes.length)
            if (nodes.length==0) {
                return;
            }else{
                for(var i = 0;i<nodes.length;i++){
                    var node = nodes[i];
                    checkChildrenNode($("#menuTree").tree("getChildren",node.target));
                    $("#menuTree").tree("check",node.target); // 选中菜单
                }

            }

        }

        function isUncheckParentNode (node) {
            var flag = true;
            var parentNode = $("#menuTree").tree("getParent",node.target);
            var nodes= $("#menuTree").tree("getChildren",parentNode.target);
            for(var i=0;i<nodes.length;i++){
                var tmp = nodes[i];
                if (tmp.checked){
                    flag = false;
                    break;
                }
            }

            return flag;

        }

        function uncheckParentNode(node) { // 注意node 是父级节点
            // alert(node)
            // 获取父节点这一层所有的状态
            var parentNode= $("#menuTree").tree("getParent",node.target);

            if (!node){
                return; // 如果没有父级节点不执行
            }else {
                var flag =  isUncheckParentNode(node);
               // alert(flag)
                if (flag){
                    $("#menuTree").tree("uncheck",parentNode.target); // 选中菜单
                    uncheckParentNode(parentNode); //
                }

            }
        }
        /**
         * 传入的是一个父节点对象,所以只要存在这个节点就会被选中
         * @param node
         */
        function checkParentNode(node) { // 注意node 是父级节点
           // alert(node)
            if (!node){
                return; // 如果没有父级节点不执行
            }else{
                checkParentNode($("#menuTree").tree("getParent",node.target)); // 使上一级也选中
                $("#menuTree").tree("check",node.target); // 选中菜单
            }
        }



        function closeMenuSetDialog() {
            $("#dlg2").dialog("close");

        }

        function searchRole(){
            $("#dg").datagrid("load",{
               "name":$("#s_roleName").val()
            });
        }

        function closeRoleDialog() {
            $("#dlg").dialog("close");
            resetValue();

        }

        function resetValue() {
            $("#name").val("");
            $("#remarks").val("");
        }

        function saveRole() {
           $("#fm").form("submit",{
               url:url,
               onSubmit:function () {
                   return $(this).form("validate");
               },
               success:function (result) {
                   var result = eval('('+result+')');
                   if (result.success){
                       $.messager.alert("系统提示","操作成功!")
                       resetValue();
                       $("#dlg").dialog("close");
                       $("#dg").datagrid("reload");
                   }else{
                       $.messager.alert("系统提示",result.errorInfo);
                   }
               }
           })
        }
        
        function openRoleAddDialog() {
            $("#dlg").dialog("open").dialog("setTitle","添加角色信息")
            url="/admin/role/save";
            
        }
        
        function openRoleModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length!=1){
                $.messager.alert("系统提示","请选择一条要修改的数据!")
                return;
            }
            var row = selectedRows[0];
            $("#dlg").dialog("open").dialog("setTitle","修改角色信息");
            $("#fm").form("load",row);

            url="/admin/role/save?id="+row.id;

            
        }
        
        function deleteRole() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length!=1){
                $.messager.alert("系统提示","请选择一条要删除的数据!")
                return;
            }

            var id = selectedRows[0].id
            $.messager.confirm("系统提示","您真的确定删除这条数据吗?",function (r) {

                if (r){
                    $.post("/admin/role/delete",{id:id},function (result) {
                        if (result.success){
                            $.messager.alert("系统提示","操作成功!")
                            $("#dg").datagrid("reload");
                        }else{
                            $.messager.alert("系统提示",result.errorInfo)
                        }
                    },"json");
                }

            });
            
        }

        // 角色双击表格内容时调用
        $(document).ready(function () {
           $("#dg").datagrid({
               onDblClickRow:function (index, row) {
                   $("#dlg").dialog("open").dialog("setTitle","修改角色信息");
                   $("#fm").form("load",row);
                   url="/admin/role/save?id="+row.id;
               }
           })

        });


    </script>

</head>
<body style="margin: 1px">
    <table id="dg" title="角色管理" class="easyui-datagrid" fitColumns="true"
    pagination="true" rownumbers="true" singleSelect="true" url="/admin/role/list" fit="true" toolbar="#tb">
        <thead>
            <th field="id" width="20" align="center">编号</th>
            <th field="name" width="50" align="center">角色名</th>
            <th field="remarks" width="80" align="center">备注</th>
            <th field="menuList" width="300" align="center">拥有权限</th>
            <th field="aa" width="50" align="center" formatter="formatEdit">权限设置</th>

        </thead>

    </table>

    <div id="tb">
        <div>
            <a href="javascript:openRoleAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="javascript:openRoleModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
            <a href="javascript:deleteRole()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>

        </div>
        <div>
            &nbsp;角色名称&nbsp;<input type="text" id="s_roleName" size="20" onkeydown="if (event.keyCode==13) searchRole()"/>
            <a href="javascript:searchRole()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        </div>
    </div>

    <div id="dlg" class="easyui-dialog" style="width: 450px;height: 300px;padding: 10px 20px"
        closed="true" buttons="#dlg-buttons" data-options="onClose:function(){resetValue()}">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>角色名称: </td>
                    <td>
                        <input type="text" id="name" name="name" class="easyui-validatebox" required="true"/>
                    </td>
                </tr>

                <tr>
                    <td valign="top">备注</td>
                    <td>
                        <textarea rows="5" cols="40" id="remarks" name="remarks"></textarea>
                    </td>
                </tr>
            </table>
        </form>
    </div>



    <div id="dlg-buttons">
        <a href="javascript:saveRole()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeRoleDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>

    </div>

    <div id="dlg2" class="easyui-dialog" style="width: 300px;height: 500px;padding: 10px 20px"
         closed="true" buttons="#dlg-buttons2">
        <input type="hidden" id="roleId" name="roleId"/>
        <ul id="menuTree" class="easyui-tree"></ul>
    </div>

    <div id="dlg-buttons2">
        <a href="javascript:saveMenuSet()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
        <a href="javascript:closeMenuSetDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>


    </div>





</body>
</html>